<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import moment from 'moment'
import { http } from '@/http' // 你的 axios 实例

const articleData = ref<any>([])

const formattedTableData = computed(() =>
  articleData.value.map((item: any) => ({
    ...item,
    createtime: formatTime(item.createtime),
    updatetime: formatTime(item.updatetime),
  })),
)

function formatTime(timeStamp: number) {
  const seconds = timeStamp / 1000
  return moment.unix(seconds).local().format('YYYY-MM-DD HH:mm:ss')
}

async function fetchDeletedArticles() {
  try {
    const res = await http.get('/api/articles/deleted')
    articleData.value = res.data
  } catch (error) {
    console.error(error)
  }
}

async function restoreArticle(id: number) {
  try {
    await http.post(`/api/articles/${id}/restore`)
    ElNotification.success('文章恢复成功！')
    fetchDeletedArticles()
  } catch (error) {
    ElNotification.error('恢复失败')
  }
}

onMounted(() => {
  fetchDeletedArticles()
})
</script>
<template>
  <div class="page-container">
    <div class="page-header">
      <h2 class="page-title">文章回收站</h2>
    </div>
    <div class="table-wrapper">
      <el-table :data="formattedTableData" stripe> </el-table>
    </div>
  </div>
</template>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.page-header {
  margin-bottom: 20px;
}
.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  flex-grow: 1;
}
</style>
